﻿<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <title>查看图形</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:进阶篇 示例">
    <meta name="author" content="hjq">
    <meta name="keywords" content="canvas,anygraph,javascript">
    <!-- frame所需脚本和样式 -->
    <link rel="stylesheet" href="../../script/bootstrap-3.3.5/css/bootstrap.min.css">   
    <link rel="stylesheet" href="../../script/codemirror/codemirror.css">
    <script src="../../script/lib/jquery-1.11.2.min.js"></script>
    <script src="../../script/codemirror/codemirror_merge.js"></script>
    <script src="../../adam.lib/basic/cb.util.js"></script>
    <!-- 加载代码块 -->
    <link rel="stylesheet" href="../../style/graph.css">
    <link rel="stylesheet" href="../css/styles.css">
    <script src="../js/helper.js"></script>
    <script>
        var pageTitle = "加载Geom格式数据";
        var pageDesc = "加载Geom格式数据";
    </script>
</head>

<body>
    <div id="wrap" style="position: relative;">
        <div id="graphWrapper" data-type="graph" style="width:100%; height:400px; border:solid 1px #CCC;"></div>
        <button style="position: absolute; right:40px; top:40px;" class="btn btn-success" id="btnOpenFile">打开文件</button>
    </div>
</body>
<script type="module">
    import { Graph, BgUtil } from "../../src/index.js";
    let data = [
        {"type":"Polygon","coords":[[[298,125],[458,125],[378,205]]],"style":{"fillStyle":1,"fillColor":"#caff67"}},
        {"type":"Polygon","coords":[[[413,240],[299,240],[299,127]]],"style":{"fillStyle":1,"fillColor":"#67becf"}},
        {"type":"Polygon","coords":[[[355,69],[298,125],[241,125],[298,69]]],"style":{"fillStyle":1,"fillColor":"#ef3d61"}},
        {"type":"Polygon","coords":[[[298,125],[242,181],[242,125]]],"style":{"fillStyle":1,"fillColor":"#f9f51a"}},
        {"type":"Polygon","coords":[[[353,69],[297,69],[297,13],[353,13]]],"style":{"fillStyle":1,"fillColor":"#a54c09"}},
        {"type":"Polygon","coords":[[[297,70],[240,70],[297,14]]],"style":{"fillStyle":1,"fillColor":"#fa8ccc"}},
        {"type":"Polygon","coords":[[[298,237],[241,180],[298,124]]],"style":{"fillStyle":1,"fillColor":"#f6ca29"}},
        {"type":"Polygon","coords":[[[72,127],[232,127],[152,207]]],"style":{"fillStyle":1,"fillColor":"#FFE5FF"}},
        {"type":"Polygon","coords":[[[186,242],[73,242],[73,129]]],"style":{"fillStyle":1,"fillColor":"#FF4DFF"}},
        {"type":"Polygon","coords":[[[128,71],[72,128],[15,128],[72,71]]],"style":{"fillStyle":1,"fillColor":"#FFB366"}},
        {"type":"Polygon","coords":[[[72,127],[16,184],[16,127]]],"style":{"fillStyle":1,"fillColor":"#8CFF66"}},
        {"type":"Polygon","coords":[[[127,72],[70,72],[70,15],[127,15]]],"style":{"fillStyle":1,"fillColor":"#66D9FF"}},
        {"type":"Polygon","coords":[[[71,72],[14,72],[71,16]]],"style":{"fillStyle":1,"fillColor":"#FF6666"}},
        {"type":"Polygon","coords":[[[72,239],[15,183],[72,126]]],"style":{"fillStyle":1,"fillColor":"#4DFFA6"}}
    ];
  
    // page loaded ready
    $(document).ready(function () {
        // 绘图层graph对象
        let graph = new Graph({
            "target": "graphWrapper"
        });

        // 显示辅助网格
        BgUtil.generateGrid(Object.assign({ "interval": 10, "graph": graph }, graph.getSize()));

        // 数据层
        let layer = graph.addLayer({ "name": "数据层" });
        layer.getSource().loadData(data);

		// 打开文件
        $("#btnOpenFile").on("click", function () {
            let options = {
                "accept": ".json",
                "dataType": "other"
            };
            Util.openFile(options, function (files) {
                let geomDatas = JSON.parse(files[0]);
                if (geomDatas.length > 0 && geomDatas[0].name == null) {
                    layer.getSource().clearData();
                    layer.getSource().loadData(geomDatas);
                } else {
                    graph.removeLayers();
                    BgUtil.generateGrid(Object.assign({ "interval": 10, "graph": graph }, graph.getSize()));
                    for (let i = 0; i < geomDatas.length; i++) {
                        layer = graph.addLayer({ "name": geomDatas[i].name });
                        layer.getSource().loadData(geomDatas[i].data);
                    }
                }
            });
        });
    });
</script>

</html>